<!-- 暂未使用 -->
<template>
  <div id="content">
    <div class="absolute"></div>
    <!-- <div class="warning" v-show="isShow">进入电子围栏</div> -->
    <!-- <div class="select">
      <div class="flex">
        <el-date-picker
          @focus="focusHandle"
          v-model="value1"
          type="datetimerange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['12:00:00']"
          size="small"
        >
        </el-date-picker>
        <p
          @click="catRoutes"
          style="color:#666;margin-left:auto;margin-right:0.1rem;"
        >
          查看轨迹
        </p>
      </div>
    </div>-->
    <!-- <div class="select">
      <ul class="selectUl">
        <li @click="changeType(1)">标签分布<i class="el-icon-menu"></i></li>
        <li @click="changeType(2)">
          标签统计<i class="el-icon-price-tag"></i>
        </li>
        <li @click="changeType(3)">
          通知发布<i class="el-icon-chat-dot-square"></i>
        </li>
        <li @click="changeType(4)">设置<i class="el-icon-setting"></i></li>
      </ul>
      <showPanel v-show="type == 1">
        <template #top>
          <header>
            <h1>当前楼层：</h1>
          </header>
        </template>
        <template #body>
          <p>map1:</p>
          <ul>
            <li>在线：</li>
            <li>人员：</li>
            <li>设备：</li>
            <li>车辆：</li>
            <li>物质：</li>
          </ul>
          <div @click="catRoutes">查看路径</div>
        </template>
      </showPanel>
      <showPanel v-show="type == 2">
        <template #top>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="总标签数据" name="first"
              >总标签数据</el-tab-pane
            >
            <el-tab-pane label="区域标签统计" name="second"
              >区域标签统计</el-tab-pane
            >
          </el-tabs>
        </template>
        <template #body>
          <p>map1:</p>
          <ul>
            <li>在线：</li>
            <li>人员：</li>
            <li>设备：</li>
            <li>车辆：</li>
            <li>物质：</li>
          </ul>
        </template>
      </showPanel>
      <showPanel v-show="type == 3">
        <template #top>
          <header>
            <h1>通知发布</h1>
          </header>
        </template>
        <template #body>
          <p>发布对象:</p>
          <div class="operate_btn">
            <div class="publish_btn" @click="publishHandle(1)">
              本地图全员发布
            </div>
            <div class="publish_btn" @click="publishHandle(2)">区域发布</div>
          </div>
        </template>
      </showPanel>
      <showPanel v-show="type == 4">
        <template #top>
          <header>
            <h1>设置</h1>
          </header>
        </template>
        <template #body>
          <p>区域显示:</p>
          <div class="areaList">
            <el-checkbox-group v-model="checkedarea">
              <el-checkbox v-for="area in areas" :label="area" :key="area">{{
                area
              }}</el-checkbox>
            </el-checkbox-group>
          </div>
          <p>地图显示:</p>
          <div class="mapList">
            <el-checkbox-group v-model="checkedmap">
              <el-checkbox v-for="map in maps" :label="map" :key="map">{{
                map
              }}</el-checkbox>
            </el-checkbox-group>
            <div>
              <div style="width:40%">
                轨迹长度：
                <el-select v-model="value" placeholder="请选择" size="small">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
        </template>
      </showPanel>
    </div>-->
    <div id="map-container">
      <div id="toolcheck" class="mycheck">
        <div class="mycheckcommon">
          <input type="checkbox" value="1" id="device1" name checked />
          <label for="device1"></label>
          <span>摄像头</span>
        </div>
        <!-- <div class="mycheckcommon">
          <input type="checkbox" value="1" id="device2" name="" checked />
          <label for="device2"></label><span>消防设备</span>
        </div>-->
        <div class="mycheckcommon">
          <input type="checkbox" value="1" id="device3" name checked />
          <label for="device3"></label>
          <span>安保人员</span>
        </div>
      </div>
    </div>
    <!-- 加载的进度动画 -->
    <div class="loading">
      <div class="lodingImg"></div>
    </div>
    <!-- 渲染地图快图片 -->
    <div class="viewmode-group">
      <button id="btn3D" class="btn btn-default"></button>
    </div>
  </div>
</template>

<script>
const APIURL = require("../../public/ipConfigtest");
import axios from "axios";
import showPanel from "./showPanel";
import MapApplication from "../MapApplication";
import $ from "jquery";
import { baseEnv } from "@/request";
let timer2;
let timerLine;
let flag1 = true;
let isChange = true; // 人员是否增减
let timer3;
let baseUrl;
var coordsData = null;
var tm, tm2, tm3, layer1, layer2, layer3;
var map;
//  var line = null;
const areasOptions = [
  "显示围栏区域",
  "显示无陪同区域",
  "显示考勤区域",
  "显示巡检点",
  "显示点名区域",
  "显示提押监控区域",
  "显示超限告警区域",
  "显示摄像头设备区域",
  "显示所有基站",
  "显示统计区域",
  "显示工作区域"
];
const mapsOptions = [
  "显示标签坐标",
  "显示搜索栏",
  "显示摄像头",
  "显示实时轨迹",
  "显示工具栏"
];
export default {
  name: "MapContainer",

  data: () => ({
    isshow: true,
    type: null,
    mapID: "test666",
    activeName: "second",
    checkedarea: [],
    checkedmap: [],
    areas: areasOptions,
    maps: mapsOptions,
    value1: "",
    options: [
      {
        value: 0,
        label: "持续"
      },
      {
        value: 3,
        label: "3秒"
      },
      {
        value: 10,
        label: "10秒"
      },
      {
        value: 60,
        label: "60秒"
      }
    ],
    value: 0
  }),
  components: {
    showPanel
  },
  mounted() {
    var that = this;
    if (baseEnv == "development") {
      baseUrl = "/b";
    } else {
      baseUrl = "https://overall.qcdoc.cn/";
    }
    // MapApplication.initMap(this);
    //定义全局map变量
    var floorLayerelc;
    var polygonMarker;
    var coordIndex = 0; //坐标点下标
    var flag;

    var vars = {};
    var timer = -1;
    var esmapID = "qcdoc_wuxi_hongmu"; //需要加载的地图id默认test666
    // var styleid = "1004"; //加载地图主题样式默认1004
    // var esmapID = "https://www.esmap.cn/EsmapJsonData"; //需要加载的地图id默认test666
    // var styleid = "https://www.esmap.cn/theme"; //加载地图主题样式默认1004
    var floorControl; //楼层控件
    var showdevicetype = {
      "1": "true",
      "2": "true",
      "3": "true"
    }; //复选框改变事件出用到
    var baoanMakrker = []; //保安marker集合，用于控制保安人员的移动路线
    // 楼层控制控件配置参数（几楼）
    var ctlOpt = new esmap.ESControlOptions({
      position: esmap.ESControlPositon.RIGHT_TOP,
      imgURL: "image/wedgets/"
    });
    // 放大、缩小控件配置
    var ctlOpt1 = new esmap.ESControlOptions({
      position: esmap.ESControlPositon.LEFT_TOP, // 位置 左上角
      // 位置x,y的偏移量
      offset: {
        x: 20,
        y: 60
      },
      imgURL: "image/wedgets/"
    });
    map = new esmap.ESMap({
      container: $("#map-container")[0], // 渲染dom
      mapDataSrc: "../../data", //地图数据位置
      // mapThemeSrc: "../../data/theme", //主题数据位置
      focusAlphaMode: true, // 对不可见图层启用透明设置 默认为true
      focusAnimateMode: true, // 开启聚焦层切换的动画显示
      focusAlpha: 0.9, // 对不聚焦图层启用透明设置，当focusAlphaMode = true时有效
      // themeID: styleid,
      mapAudioSrc: "../lib",
      token: "202107010001",
      defaultScaleLevel: 18, //默认缩放等级
      focusFloor: 1, //初始化聚焦楼层
      viewMode: "2D",
      defaultAngle: 0
    });
    map.openMapById(esmapID); //打开地图
    map.showCompass = true; //显示指南针
    //地图加载完成回调
    map.on("loadComplete", function() {
      floorLayerelc = map.getFloor(map.focusFloorNum);
      // 电子围栏

      var center = map.center;
      // console.log(center);
      var testpoint = [
        [
          {
            x: center.x - 7,
            y: center.y + 6,
            z: 26
          },
          {
            x: center.x - 22,
            y: center.y - 3,
            z: 26
          },
          {
            x: center.x - 12,
            y: center.y - 3,
            z: 26
          }
        ],
        [
          {
            x: center.x - 1,
            y: center.y - 1,
            z: 26
          },

          {
            x: center.x - 12,
            y: center.y - 1,
            z: 26
          }
        ]
      ];
      let lineName1 = null;
      let lineName2 = null;
      // for (let i = 0; i < testpoint.length; i++) {
      //   if (i == 0) {
      //     testDraw(testpoint[i], lineName1);
      //   }
      //   if (i == 1) {
      //     testDraw(testpoint[i],  lineName2);
      //   }
      // }
      // createPolygonMaker(testpoint);
      let polygonArr = [];
      that.axios
        .get(`${baseUrl}/location/getFence?id=2`, {
          headers: {
            "Content-Type": "application/json;charset=UTF-8"
          }
        })
        .then(res => {
          let data = res.data.data.vertex;
          var keyMap = {
            X: "x",
            Y: "y",
            Z: "z"
          };
          data.forEach((el, index) => {
            // 外层
            el.forEach(e => {
              for (var key in e) {
                var newKey = keyMap[key];
                if (newKey) {
                  e[newKey] = e[key];
                  delete e[key];
                } else {
                  delete e[key];
                }
              }
            });
            polygonArr.push(el);
          });
          for (let i = 0; i < polygonArr.length; i++) {
            let point = polygonArr[i];
            createPolygonMaker(point);
          }
        });

      floorControl = new esmap.ESScrollFloorsControl(map, ctlOpt); //创建楼层控件
      var zoomControl = new esmap.ESZoomControl(map, ctlOpt1); //创建放大缩小控件
      bingEvents(); //绑定按钮点击事件
      loadDeviceData(); //加载自己构造好的json格式数据
      setTimeout(() => {
        if (timer != -1) {
          return;
        }
        flag = true;
        coordIndex = 0;
      });
    });
    function testDraw(testpoints, line) {
      if (testpoints.length && testpoints.length <= 1) return;
      // changeSameP(points);
      if (line) {
        line.updatePoints(testpoints);
      } else {
        //创建线标注(id:routes)对象
        var line = new esmap.ESLineMarker(1, testpoints, lineStyle);
        //调用地图的画线方法
        map.drawLineMark(line);
        return line;
      }
    }

    // ********************************************************

    function CreateMarker(x, y, fnum) {
      //标注起始坐标点， 所在楼层
      layer1 = new esmap.ESLayer("textMarker");
      var floorLayer1 = map.getFloor(fnum); // 所在楼层
      tm = new esmap.ESTextMarker({
        x: x, //gpos1.x - 16
        y: y, //gpos1.y + 25
        name: "测试人员1",
        showLevel: 20,
        height: 1.5,
        image: "image/3.png",
        imageAlign: "bottom",
        imageSize: 64,
        seeThrough: true,
        // spritify: true, //是否跟随地图缩放默认为true
        fillcolor: "255,0,0", //填充色
        fontsize: "18", //字体大小
        strokecolor: "255,255,0", //边框色
        strokewidth: 2 //边框厚度  0表示无边框
      });
      layer1.addMarker(tm);
      floorLayer1.addLayer(layer1);
    }
    function updateCoord() {
      var points = [];
      var lastfnum = 0;
      timer = setInterval(updated, 500);
      function updated() {
        if (coordIndex >= coordsData.length) {
          //数据用完了，关掉定时器，清0
          clearInterval(timer);
          timer = -1;
          // map.clearLineMarkById("routes");

          line = null;
          if (lastfnum > 0)
            // map
            //   .getFloor(lastfnum)
            //   .removeLayersByTypes(esmap.ESLayerType.TEXT_MARKER);
            return;
        }

        var coord = coordsData[coordIndex]; //取坐标点
        if (map.focusFloorNum != coord.fnum) map.focusFloorNum = coord.fnum; //判断聚焦楼层
        if (lastfnum != coord.fnum) {
          //切换层的时候先要清除之前层的Marker
          if (lastfnum > 0)
            map
              .getFloor(lastfnum)
              .removeLayersByTypes(esmap.ESLayerType.TEXT_MARKER);
          CreateMarker(coord.x, coord.y, coord.fnum);
          lastfnum = coord.fnum;
          points = [];
        }
        //过滤前后重复的
        if (points.length && points.length > 0) {
          var chge = ckSamePt(points[points.length - 1], coord);
          if (chge) return;
        }

        tm.moveTo({
          x: coord.x,
          y: coord.y,
          time: 0
        });
        //只保留6个点  画轨迹线
        if (points.length > 6) {
          points.shift(); //先踢掉第一个
        }

        points.push(coord); //在把新点加入进去

        drawLine(points);
        coordIndex++;
      }
    }
    // }

    //配置线标注样式
    var lineStyle = {
      lineWidth: 0.8,
      alpha: 0.8,
      offsetHeight: 0,
      hiddenByFloor: false,
      url: "image/arrow.png", //贴图线图片url
      lineType: esmap.ESLineType.TEXTURE
    };

    //画轨迹线
    function drawLine(points, line) {
      if (points.length && points.length <= 1) return;
      changeSameP(points);
      if (line) {
        line.updatePoints(points);
      } else {
        //创建线标注(name:routes)对象
        line = new esmap.ESLineMarker("routes", points, lineStyle);
        //调用地图的画线方法
        map.drawLineMark(line);
      }
      return line;
    }

    //来回画线坐标重复导致线不显示的问题,采用重复坐标点偏移一些来解决
    function changeSameP(points) {
      if (points.length && points.length < 3) return;
      let chge = ckSamePt(points[points.length - 1], points[points.length - 3]);
      if (chge) {
        points[points.length - 1].x += 0.001;
        points[points.length - 1].y += 0.001;
        return points;
      } else {
        return points;
      }
    }

    //判断两点是否相等
    function ckSamePt(p1, p2) {
      if (p1.fnum != p2.fnum) {
        return false;
      }
      if (Math.abs(p1.x - p2.x) < 0.0001 && Math.abs(p1.y - p2.y) < 0.0001) {
        //判断两点间距离
        return true;
      }
      return false;
    }

    // ********************************************************
    //地图点击事件回调
    map.on("mapClickNode", function(event) {
      console.log(event);
      if (event && event.hasOwnProperty("deviceType")) {
        //这里判断点击的是否是自己新增的设备marker
        showPop(event);
      }
    });
    //绑定事件
    function bingEvents() {
      document.getElementById("btn3D").onclick = function() {
        if (map.viewMode == esmap.ESViewMode.MODE_2D) {
          map.viewMode = esmap.ESViewMode.MODE_3D; //2D-->3D
          document.getElementById("btn3D").style.backgroundImage =
            "url('image/wedgets/3D.png')";
        } else {
          map.viewMode = esmap.ESViewMode.MODE_2D; //3D-->2D
          document.getElementById("btn3D").style.backgroundImage =
            "url('image/wedgets/2D.png')";
        }
      };
      //复选框改变事件
      for (var type in showdevicetype) {
        (function(type_) {
          $("#device" + type_).change(function() {
            if ($("#device" + type_).is(":checked")) {
              showdevicetype[type_] = true;
              hideOrShowLayer(["device" + type_], true);
            } else {
              showdevicetype[type_] = false;
              hideOrShowLayer(["device" + type_], false);
            }
          });
        })(type);
      }
    }
    // let old = [];
    //加载图层数据
    function loadDeviceData() {
      // $.getJSON("data.json", function(data) {
      //   coordsData = data.points;
      // });
      $.getJSON("device.json", function(data) {
        if (data) {
          var devices = data.devices;
          for (let i = 0; i < devices.length; i++) {
            const obj = devices[i];
            addDeviceMarker(obj); //在地图上添加设备marker
          }
        }
      });
      var baoan = [];
      let timerBaoan = setInterval(() => {
        // 首次请求push新增这些人，再次请求判断
        // 新增
        // 减少
        // 新增某些人，走掉某些人
      }, 1000);
      that.axios
        .get(`${baseUrl}/location/getPosInfo`, {
          headers: {
            "Content-Type": "application/json;charset=UTF-8"
          }
        })
        .then(res => {
          res.data.data.forEach(el => {
            if (
              el.tagId == 418222 ||
              el.tagId == 416631 ||
              el.tagId == 430054
            ) {
              el.type = 0;
            } else {
              el.type = 3;
            }
            let id = el.tagId;
            switch (id) {
              case 416631:
                el.name = "陶程";
                break;
              case 418222:
                el.name = "杨杰";
                break;
              case 430054:
                el.name = "钱海";
                break;
              default:
                el.name = "访客";
                break;
            }
            baoan.push({
              id: el.tagId,
              type: el.type,
              name: el.name,
              size: 64,
              x: parseFloat(el.posX),
              y: parseFloat(el.posY),
              fnum: 1,
              t_currentIndex: 0,
              t_points: [
                {
                  x: parseFloat(el.posX),
                  y: parseFloat(el.posY),
                  fnum: 1
                }
              ]
            });
            // }
          });
          for (let i = 0; i < baoan.length; i++) {
            const obj = baoan[i];
            // addTextMarker(baoan[0]); //在地图上添加安保人员marker
            addTextMarker(obj);
          }
          // 启动定时器
          baoanMoveRoute();
        });
    }

    //在地图上添加设备marker

    function addDeviceMarker(obj) {
      //通过名字区别创建不同的layer
      var floorLayer = map.getFloor(obj.fnum); //获取第一层的楼层对象
      var layer = floorLayer.getOrCreateLayerByName(
        "device" + obj.type,
        esmap.ESLayerType.IMAGE_MARKER
      ); //"device"+type 隐藏/删除的时候用
      var url = "image/" + obj.type + ".png";
      var angle = null;
      if (obj.hasOwnProperty("angle")) angle = obj.angle;
      let im = new esmap.ESImageMarker({
        x: obj.x, //坐标x
        y: obj.y, //坐标y
        url: url, //图片标注的图片地址
        size: obj.size, //图片大小 或者 size:{w:32,h:64},
        angle: angle,
        spritify: true, //跟随地图缩放变化大小，默认为true，可选参数
        height: 2, //距离地面高度
        showLevel: 20, //地图缩放等级达到多少时隐藏,可选参数
        seeThrough: false, //是否可以穿透楼层一直显示,可选参数
        id: obj.tagId, //id，可自定义
        name: obj.name //name可自定义
      });
      // var rotateID = setInterval(function() {
      //   angle += 2;
      //   im.angle = angle; //直接设置角度旋转
      // }, 50);
      im.deviceType = obj.type; //自定义属性-用于点击事件中区分点击的是什么类型的设备
      layer.addMarker(im); //将imageMarker添加到图层
      floorLayer.addLayer(layer); //将图层添加到楼层对象
    }
    //在地图上添加安保人员marker
    function addTextMarker(obj) {
      //通过名字区别创建不同的layer
      var floorLayer = map.getFloor(obj.fnum); //获取第一层的楼层对象
      var layer = floorLayer.getOrCreateLayerByName(
        "device" + obj.type,
        esmap.ESLayerType.TEXT_MARKER
      ); //"device"+type 隐藏/删除的时候用
      var url = "image/" + obj.type + ".png";
      var tm = new esmap.ESTextMarker({
        x: obj.x, //坐标x
        y: obj.y, //坐标y
        id: obj.id, //id，可自定义
        image: url, //图片标注的图片地址
        imageAlign: "bottom", //图片方位left,top,right,bottom
        imageSize: obj.size, //图片大小
        name: obj.name, //文字名称
        spritify: true, //跟随地图缩放变化大小,默认为true,可选参数
        scale: 1, //文字等级缩放默认为1,可选参数,0.1表明缩小10倍
        height: 0.5, //距离地面高度
        showLevel: 20, //地图缩放等级达到多少时隐藏,可选参数
        fillcolor: "255,0,0", //填充色
        fontsize: "8", //字体大小
        strokecolor: "255,255,0", //边框色
        strokewidth: 2 //边框厚度  0表示无边框
      });
      tm.deviceType = obj.type; //自定义属性-用于点击事件中区分点击的是什么类型的设备
      tm.routePoints = obj.routePoints; //人员的移动路径
      tm.t_points = [];
      baoanMakrker.push(tm);
      layer.addMarker(tm); //将imageMarker添加到图层
      floorLayer.addLayer(layer); //将图层添加到楼层对象
      // baoanMoveRoute2(tm); //控制保安的移动
    }
    //控制保安的移动
    function baoanMoveRoute2(bamarker) {
      var index = 0;
      //  setInterval(function() {
      that.axios
        .get(`${baseUrl}/location/getPosInfo`, {
          headers: {
            "Content-Type": "application/json;charset=UTF-8"
          }
        })
        .then(res => {
          const alldata = res.data.data;
          let i = alldata.findIndex(value => {
            return value.tagId == bamarker.id_;
          });
          var point = { x: alldata[i].posX, y: alldata[i].posY, time: 0 };
          //移动marker
          // debugger
          bamarker.moveTo(point);
          // 画线
          if (bamarker.t_points.length >= 5) {
            bamarker.t_points.shift(); //先踢掉第一个
          }
          bamarker.t_points.push(point); //在把新点加入进去
          // console.log(bamarker.t_points)
          // drawLine(bamarker.t_points);
          index++;
          console.log(index);
        });
      // }, 5000);
    }
    function baoanMoveRoute() {
      var lines = {}; //批量定义
      var point = {}; // 记录上一个值
      for (var j = 0; j < baoanMakrker.length; j++) {
        var lineName = "line" + j; //动态定义变量名
        lines[lineName] = null; //动态赋值
        var pointName = "point" + j; //动态定义变量名
        point[lineName] = null; //动态赋值
      }
      if (baoanMakrker && baoanMakrker.length > 0) {
        // var index = 0;
        timerLine = setInterval(function() {
          that.axios
            .get(`${baseUrl}/location/getPosInfo`, {
              headers: {
                "Content-Type": "application/json;charset=UTF-8"
              }
            })
            .then(res => {
              const alldata = res.data.data;
              // res.data.data.forEach((el) => {
              for (let i = 0; i < baoanMakrker.length; i++) {
                // console.log(i)
                // 当前人对象信息
                const bamarker = baoanMakrker[i];
                //console.log(bamarker.id_, baoanMakrker.length);
                if (bamarker.id_ == alldata[i].tagId) { // 每秒请求一次，对比所有人的每个点位
                  //过滤前后重复的
                  if (point[`point${i}`]) {
                    var chge = ckSamePt(point[`point${i}`], {
                      x: alldata[i].posX,
                      y: alldata[i].posY
                    });
                    if (chge) {
                      continue
                    }
                  }
                  point[`point${i}`] = {
                    x: alldata[i].posX,
                    y: alldata[i].posY,
                    time: 0
                  };
                  //移动marker
                  bamarker.moveTo(point[`point${i}`]);
                  // 画线

                  if (bamarker.t_points.length >= 10) {
                    bamarker.t_points.shift(); //先踢掉第一个
                  }
                  bamarker.t_points.push(point[`point${i}`]); //在把新点加入进去
                  lines[`line${i}`] = drawLine(
                    bamarker.t_points,
                    lines[`line${i}`]
                  );
                }
              }
              // index++;
            });
        }, 1000);
      }
    }
    //根据名字显示或隐藏设备图层
    function hideOrShowLayer(params, isshow) {
      //params格式['device1','device2',...] isshow:true/fasle
      var fnums = map.floorNums; //获取地图所有楼层[1,2,3]
      for (var i = 0; i < fnums.length; i++) {
        var floor = map.getFloor(fnums[i]);
        var res = floor.getLayersByNames(params);

        if (res && res.length > 0) {
          res[0].visible = isshow;
          // if (!res[0].visible) {
          //   if (params[0] == "device3") {
          //     //清空线
          //     map.clearLineMarkById("lines0");
          //   }
          // }
        }
      }
    }
    var popMarker = null;

    function showPop(data) {
      //点击marker 弹出基本信息
      if (popMarker) popMarker.close();
      var types = {
        "1": "摄像头",
        "2": "消防设备",
        "3": "员工",
        "0": "访客"
      };
      var className = "close-" + data.ID; //生成唯一的class，用于关闭
      if (data.deviceType != 1) {
        //如果点击的不是摄像头
        popMarker = new esmap.ESPopMarker({
          mapCoord: {
            //设置弹框的x轴
            x: data.x,
            //设置弹框的y轴
            y: data.y,
            height: 3.5, //控制信息窗的高度
            //设置弹框位于的楼层
            fnum: data.FloorNum
          },
          className: "rock-box m-pop", //自定义popMarker样式。在css里配置
          //设置弹框的宽度
          width: 300,
          //设置弹框的高度
          height: 150,
          //    marginTop:10,  //弹框距离地面的高度
          //设置弹框的内容
          content:
            '<div class="title"><span style="margin: 20px;">信息弹框</span></div>' +
            '<div class="m-box">' +
            '<div class="m-text">' +
            "<p>" +
            '<span class="m-span">id</span>' +
            '<span class="m-span">名称</span>' +
            '<span class="m-span">类型</span>' +
            "</p>" +
            "<p>" +
            '<span class="m-span2">' +
            data.ID +
            "</span>" +
            '<span class="m-span2 status">' +
            data.name +
            "</span>" +
            '<span class="m-span2 ">' +
            types[data.deviceType] +
            "</span>" +
            "</p>" +
            "</div>" +
            "</div>" +
            '<div class="myPopClose ' +
            className +
            '"></div>',
          closeCallBack: function() {
            //信息窗点击关闭操作
          },
          created: function(e) {
            //创建完成钩子
            $("." + className).on("click", function() {
              //为自定义关闭按钮绑定隐藏事件
              popMarker.close();
            });
          }
        });
      } else {
        //点击摄像头
        popMarker = new esmap.ESPopMarker({
          mapCoord: {
            //设置弹框的x轴
            x: data.x,
            //设置弹框的y轴
            y: data.y,
            height: 3.5, //控制信息窗的高度
            //设置弹框位于的楼层
            fnum: data.FloorNum
          },
          className: "rock-box m-pop", //自定义popMarker样式。在css里配置
          //设置弹框的宽度
          width: 300,
          //设置弹框的高度
          height: 220,
          //    marginTop:10,  //弹框距离地面的高度
          //设置弹框的内容
          // content:
          //   '<iframe id="myVideo" src="https://www.esmap.cn/onlinedev/content/editor/demo/demo/Case/DeviceLayer/1.mp4" frameborder="0"></iframe>',
          content:
            '<div class="title"><span>' +
            data.name +
            "</span></div>" +
            '<div class="m-box">' +
            '<video style="width: 300px;height: 220px" controls autoplay>' +
            '<source src="https://www.esmap.cn/onlinedev/content/editor/demo/demo/Case/DeviceLayer/1.mp4"  type="video/mp4">' +
            "</video>" +
            "</div>" +
            '<div class="myPopClose ' +
            className +
            '"></div>',
          closeCallBack: function() {
            //信息窗点击关闭操作
          },
          created: function(e) {
            //创建完成钩子
            $("." + className).on("click", function() {
              //为自定义关闭按钮绑定隐藏事件
              popMarker.close();
            });
          }
        });
      }
    }

    function createPolygonMaker(coords) {
      var layer = floorLayerelc.getOrCreateLayerByName(
        "",
        esmap.ESLayerType.POLYGON_MARKER
      );
      polygonMarker = new esmap.ESPolygonMarker({
        // color: "#3CF9DF",
        color: "#ff0000",
        //设置透明度
        alpha: 0.4,
        //设置边框线的宽度
        lineWidth: 1.5,
        //设置高度
        height: 5.5,
        //设置多边形坐标点
        points: coords
      });
      layer.addMarker(polygonMarker);
    }
  },
  methods: {
    // publishHandle(type) {
    //   if (type == 1) {
    //     // 打开弹框
    //   } else {
    //     // 提示框
    //   }
    // },
    // focusHandle() {
    //   flag1 = true;
    //   map.clearLineMarkById("routes");
    // },
    // catRoutes() {
    //   var timer = -1;
    //   var coordIndex = 0;
    //   if (flag1) {
    //     if (this.value1 == "") {
    //       this.$message("请选择时间段");
    //       return;
    //     }
    //     updateCoord();
    //   }

    //   var that = this;
    //   //来回画线坐标重复导致线不显示的问题,采用重复坐标点偏移一些来解决
    //   function changeSameP(points) {
    //     if (points.length && points.length < 3) return;
    //     let chge = ckSamePt(
    //       points[points.length - 1],
    //       points[points.length - 3]
    //     );
    //     if (chge) {
    //       points[points.length - 1].x += 0.001;
    //       points[points.length - 1].y += 0.001;
    //       return points;
    //     } else {
    //       return points;
    //     }
    //   }
    //   //判断两点是否相等
    //   function ckSamePt(p1, p2) {
    //     if (p1.fnum != p2.fnum) {
    //       return false;
    //     }
    //     if (Math.abs(p1.x - p2.x) < 0.0001 && Math.abs(p1.y - p2.y) < 0.0001) {
    //       //判断两点间距离
    //       return true;
    //     }
    //     return false;
    //   }
    //   function CreateMarker(x, y, fnum) {
    //     //标注起始坐标点， 所在楼层
    //     layer1 = new esmap.ESLayer("textMarker");
    //     var floorLayer1 = map.getFloor(fnum); // 所在楼层
    //     tm = new esmap.ESTextMarker({
    //       x: x, //gpos1.x - 16
    //       y: y, //gpos1.y + 25
    //       name: "测试人员1",
    //       showLevel: 20,
    //       height: 1.5,
    //       image: "image/3.png",
    //       imageAlign: "bottom",
    //       imageSize: 64,
    //       seeThrough: true,
    //       // spritify: true, //是否跟随地图缩放默认为true
    //       fillcolor: "255,0,0", //填充色
    //       fontsize: "18", //字体大小
    //       strokecolor: "255,255,0", //边框色
    //       strokewidth: 2, //边框厚度  0表示无边框
    //     });
    //     layer1.addMarker(tm);
    //     floorLayer1.addLayer(layer1);
    //   }
    //   //配置线标注样式
    //   var lineStyle = {
    //     lineWidth: 3,
    //     alpha: 0.8,
    //     offsetHeight: 0,
    //     hiddenByFloor: false,
    //     url: "image/arrow.png", //贴图线图片url
    //     lineType: esmap.ESLineType.TEXTURE,
    //   };

    //   //画轨迹线
    //   function drawLine(points) {
    //     if (points.length && points.length <= 1) return;
    //     changeSameP(points);
    //     if (line) {
    //       line.updatePoints(points);
    //     } else {
    //       //创建线标注(name:routes)对象
    //       line = new esmap.ESLineMarker("routes", points, lineStyle);
    //       //调用地图的画线方法
    //       map.drawLineMark(line);
    //     }
    //   }
    //   function updateCoord() {
    //     flag1 = false;
    //     var points = [];
    //     var lastfnum = 0;
    //     timer = setInterval(updated, 500);
    //     function updated() {
    //       if (coordIndex >= coordsData.length) {
    //         //数据用完了，关掉定时器，清0
    //         clearInterval(timer);
    //         timer = -1;
    //         // map.clearLineMarkById("routes");

    //         line = null;
    //         if (lastfnum > 0)
    //           // map
    //           //   .getFloor(lastfnum)
    //           //   .removeLayersByTypes(esmap.ESLayerType.TEXT_MARKER);
    //           return;
    //       }

    //       var coord = coordsData[coordIndex]; //取坐标点
    //       if (map.focusFloorNum != coord.fnum) map.focusFloorNum = coord.fnum; //判断聚焦楼层
    //       if (lastfnum != coord.fnum) {
    //         //切换层的时候先要清除之前层的Marker
    //         if (lastfnum > 0)
    //           map
    //             .getFloor(lastfnum)
    //             .removeLayersByTypes(esmap.ESLayerType.TEXT_MARKER);
    //         CreateMarker(coord.x, coord.y, coord.fnum);
    //         lastfnum = coord.fnum;
    //         points = [];
    //       }
    //       //过滤前后重复的
    //       if (points.length && points.length > 0) {
    //         var chge = ckSamePt(points[points.length - 1], coord);
    //         if (chge) return;
    //       }

    //       tm.moveTo({
    //         x: coord.x,
    //         y: coord.y,
    //         time: 0,
    //       });
    //       //只保留6个点  画轨迹线
    //       if (points.length > 6) {
    //         points.shift(); //先踢掉第一个
    //       }

    //       points.push(coord); //在把新点加入进去

    //       drawLine(points);
    //       coordIndex++;
    //     }
    //   }
    // },

    handleClick(tab, event) {
      console.log(tab, event);
    },
    changeType(num) {
      if (this.type == num) {
        this.type = null;
      } else {
        this.type = num;
      }
    }
  },
  destroyed() {
    MapApplication.destroyMap();
    clearInterval(timer2);
    clearInterval(timer3);
    clearInterval(timerLine);
  }
};
</script>
<style>
.el-range-editor,
.el-range-editor.is-active,
.el-range-editor.is-active:hover {
  border-color: transparent;
}
.areaList > .el-checkbox-group,
.mapList > .el-checkbox-group {
  display: flex;
  flex-wrap: wrap;
}

.mapList > .el-checkbox-group > .el-checkbox,
.areaList > .el-checkbox-group > .el-checkbox {
  width: 40%;
}

.el-tabs__item {
  font-size: 0.83vw !important;
}
</style>
<style scoped>
.absolute {
  position: absolute;
  bottom: -5%;
  right: 0;
  width: 30%;
  height: 10%;
  z-index: 100;
  background-color: #001226;
}
.warning {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translate(-50%, -10px);
}
.flex {
  display: flex;
  align-items: center;
}
header > h1 {
  background: #f6faff;
  color: #333;
  height: 40px;
  font-weight: 700;
  font-size: 0.83vw;
  line-height: 40px;
  padding: 0 36px 0 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.title_p {
  border-left: 5px solid #09f;
  font-weight: 700;
  font-size: 0.8vw;
  line-height: 16px;
  padding-left: 10px;
  color: #333;
  margin-bottom: 12px;
}

#toolcheck {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  display: none;
}

#content {
  display: flex;
  justify-content: center;
  height: 100%;
  /* box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 3px; */
  position: relative;
  width: 100%;
  /* overflow: hidden; */
  margin-top: -0.5rem;
  /* background-color: black; */
}

#map-container {
  height: 100%;
  width: 100%;
  /* height: 800px;
  width: 80%; */
  position: relative;
}

.viewmode-group {
  position: absolute;
  right: 12px;
  top: 160px;
  border-radius: 6px;
  border: none;
}

.viewmode-group button {
  display: inline-block;
  width: 38px;
  height: 38px;
  border-radius: 4px;
  border: none;
  background-image: url("../../public/image/wedgets/3D.png");
}

.select {
  width: 45%;
  /* height: 0.3rem; */
  height: auto;
  background-color: #fff;
  position: absolute;
  right: 10px;
  top: 0;
  /* padding: 0.1rem 0; */
}

.selectUl > li {
  display: inline-block;
  list-style: none;
  color: #666;
  width: 25%;
  text-align: center;
  font-size: 0.16rem;
}

.selectUl > li:hover {
  color: #409eff;
}
</style>
